import React, { Component } from 'react'

export class App extends Component {
  // 为什么setState设计为异步呢?
  // setState设计为异步，可以显著的提升性能
  // 口如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新染，这样效率是很低的:
  // 最好的办法应该是获取到多个更新，之后进行批量更新
 
  // 如果同步更新了state
  // 但是还没有执行render函数
  // 那么state和props不能保持同步
  // 口 state和props不能保持一致性p
  // 会在开发中产生很多的问题;
  constructor(props){
    super(props)

    this.state={
      message: "跨越光年，归来任是你。 --臆影",
      counter:0
    }
  }
  textChange () {
    //1.setState的 更多用法
    // 1.基本使用
    // this.setState({
    //   message:"不管人生呈现出什么样貌，人生的构成要素都是一样的。 --人生的智慧"
    // })
    // 2.setState 可以传入一个回调函数
    // 好处一: 可以在回调函数中编写新的state的逻辑
    // 好处二:当前的回调函数会将之前的state和props传递进来
    // this.setState((state,props)=>{
    //   // 1.编写一些对新的state处理逻辑
    //   // 2.可以获取之前的state和props值
    //   console.log(this.state.message,props)
    //   return {
    //     message:"只有当不幸真的到来时，我们才会怀念和渴望那些逝去的美好时光。 --人生的智慧"
    //   }
    // })
    // 3.setState在recat的事件处理中是一个异步调用
    // 如果希望在数据更新之后(数据合并),获取到对应的结果执行一些逻辑代码
    // 那么可以在setState中传入第二个参数callback
    this.setState({message:"你好"},()=>{
      console.log("+++++",this.state.message)
    })
    console.log("--------",this.state.message)
  }
  counterChange(){

  }
  render() {
    const {message,counter} = this.state
    return (
      <div>

        <div><h1>message:</h1></div>
        <div>
          <h2>{message}</h2>
        </div>
        <button onClick={e=>this.textChange()}>修改文本</button>
        <h2>counter:{counter}</h2>
        <button onClick={e=>this.counterChange()}>counter + 1</button>
      </div>
    )
  }
}

export default App